<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 添加角色按钮区 -->
      <el-row>
        <el-col>
          <el-button type="primary">
            添加角色
          </el-button>
        </el-col>
      </el-row>
      <!-- 角色列表区 -->
      <el-table :data="rolelist" border stripe> </el-table>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="用户名称" prop="username"></el-table-column>
      <el-table-column label="用户身份" prop="userothers"></el-table-column>
      <el-table-column label="操作">
        <!-- <template slot-scope="">
          <el-button type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
          <el-button type="warning" icon="el-icon-setting">分配权限</el-button>
        </template> -->
      </el-table-column>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 所有角色列表数据
      rolelist: []
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 获取所有数据的列表
    async getUserList () {
      const { data: res } = await this.$http.get('user')
      if (res.code !== 20000) {
        return this.$message.error('获取数据失败')
      }
      // this.rolelist = res.data
      console.log(this.rolelist)
    }
  }
}
</script>
